<template>
  <div>
    <div><i class="el-icon-star-on"></i>基础信息</div>
    <r-list
      :ColsNum="7"
      :width="120"
      :ListCols="ListCols"
      ListType="Info"
      :ListData="ListData"
    ></r-list>
    <div class="mtb20 "><i class="el-icon-star-on"></i>商品信息</div>

    <r-table
      :isPagination="false"
      :isHandle="false"
      :tableData="tableData"
      :tableCols="tableCols"
      :isSelection="false"
      @refresh="init"
    >
    </r-table>

    <div style="text-align: right;color:red;">
      <span>{{ tableBottom.title }}：{{ tableBottom.content }}</span>
    </div>

    <div class="mt20"><i class="el-icon-star-on"></i>费用信息</div>
    <r-list
      :ColsNum="5"
      :ListCols="ListColsFeiyong"
      ListType="Info"
      :ListData="ListDataFeiyong"
    ></r-list>
    <div class="mt20"><i class="el-icon-star-on"></i>订单利润分成</div>
    <r-list
      :ColsNum="3"
      :ListCols="ListColsFencheng"
      ListType="Info"
      :ListData="ListDataFencheng"
    ></r-list>
    <div class="mt20"><i class="el-icon-star-on"></i>售后信息</div>
    <r-list
      :ColsNum="3"
      :ListCols="ListColsShouhou"
      ListType="Info"
      :ListData="ListDataShouhou"
    ></r-list>
    <div class="mt20 mb20"><i class="el-icon-star-on"></i>称波动Record</div>
    <r-table
      :tableData="tableDataBodong"
      :tableCols="tableColsBodong"
      style="height:400px"
      @refresh="init()"
    ></r-table>
    <div class="mt20 mb20"><i class="el-icon-star-on"></i>订单视频</div>
    <!-- <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="1000px" :isHandle="true" /> -->
    <div class="rad">
      <video
        :src="videoUrl | formatImg"
        class="pw100 ph100"
        controls="controls"
        preload="preload"
      >
        您的浏览器不支持视频。
      </video>
    </div>

    <refund
      :res="refund_data"
      v-if="refund_data.show"
      v-on:refund_call="refund_call"
    ></refund>
  </div>
</template>
<script>
import refund from "./cus/refund";
export default {
  components: {
    refund
  },
  data() {
    return {
      refund_data: {
        show: false,
        id: null
      },
      //基础信息
      ListCols: [
        [
          {
            label: "Order Nnumber",
            prop: "orderNo"
          },
          {
            label: "订单Status",
            prop: "aftersaleState",
            // formatter: e => e.aftersaleState == 0 ? "Pending Review" :e.aftersaleState == 1 ? '已退款' : e.aftersaleState == 3 ? '拒绝退款' : ''
            formatter: e =>
              e.state == 0
                ? "Cancel"
                : e.state == 1
                ? "Completed"
                : e.state == 2
                ? "全额退款"
                : e.state == 3
                ? "部分退款"
                : e.state == 4
                ? "未Payment"
                : e.state == 5
                ? "申请售后"
                : ""
          },
          {
            label: "下单User",
            prop: "nickName"
          },
          {
            label: "Phone码",
            prop: "phone"
            // color: "#f00",
            // formatter: e => e == 1 ? "已处理" : '未处理'
          },
          {
            label: "Payment方式",
            prop: "payType",
            // formatter: e => e.payType == 1 ? "未知" : e.payType == 2 ? 'WeChat公众号Payment' : e.payType == 3 ? 'WeChat公众号免密Payment' : e.payType == 4 ? 'WeChat人脸识别Payment' : e.payType == 5 ? 'IC卡Payment' : e.payType == 6 ? 'AlipayPayment' : e.payType == 7 ? 'Alipay免密Payment' : ''
            formatter: e =>
              e.payType == 1
                ? "未知"
                : e.payType == 2
                ? "WeChat公众号Payment"
                : e.payType == 3
                ? "WeChat公众号免密Payment"
                : e.payType == 4
                ? "WeChat人脸识别Payment"
                : e.payType == 5
                ? "IC卡Payment"
                : e.payType == 6
                ? "AlipayPayment"
                : e.payType == 7
                ? "Alipay免密Payment"
                : e.payType == 8
                ? "BalancePayment"
                : ""
          },
          {
            label: "PaymentMoney",
            prop: "actuallyPaidMoney",
            formatter: e =>
              e.actuallyPaidMoney ? "￥" + e.actuallyPaidMoney : "￥0"
          },
          {
            label: "Payment时间",
            prop: "payTime"
          },
          {
            label: "Device Number",
            prop: "equipmentNo"
          },
          {
            label: "设备Type",
            prop: "typeId2",
            formatter: e => (e ? "生鲜柜" : "")
          },
          {
            label: "设备Type",
            prop: "typeId",
            formatter: e => (e.typeId == 1 ? "单柜门" : "双柜门")
          },
          {
            label: "Belonging Agent商",
            prop: "agentName"
          },
          {
            label: "所属商家",
            prop: "merchantName"
          },
          {
            label: "开门时间",
            prop: "opendDoor"
          },
          {
            label: "关门时间",
            prop: "closedDoor"
          }
        ]
      ],
      ListData: {},
      //费用信息Data
      ListDataFeiyong: {},
      //费用信息
      ListColsFeiyong: [
        [
          {
            label: "商品合计",
            prop: "copeMoney",
            formatter: e => "￥" + e.copeMoney
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "优惠Money",
            prop: "favorableMoney",
            formatter: e => "￥" + e.favorableMoney
          },
          {
            label: "应付款Money",
            prop: "actuallyPaidMoney",
            formatter: e => "￥" + e.actuallyPaidMoney
          },
          {
            label: "退款Money",
            prop: "refundMoney",
            formatter: e => "￥" + e.refundMoney
          },
          {
            label: "退款时间",
            prop: "refundTime"
          }
        ]
      ],
      //订单分成利润
      ListDataFencheng: {},
      //订单分成利润信息
      ListColsFencheng: [
        [
          {
            label: "商品合计",
            prop: "money",
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
            formatter: e => (e && e.money ? "￥" + e.money : "-")
          },
          {
            label: "商品成本合计",
            prop: "costMoney",
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
            formatter: e => (e && e.costMoney ? "￥" + e.costMoney : "-")
          },
          {
            label: "订单利润",
            prop: "money",
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
            formatter: e =>
              e && e.money ? "￥" + (e.money - e.costMoney) : "-"
          },
          {
            label: "分成Money",
            prop: "money",
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
            formatter: e => (e && e.money ? "￥" + e.money : "-")
          },
          {
            label: "Operator分成",
            prop: "operatorBonusInfo",
            formatter: e =>
              e &&
              e.operatorBonusInfo &&
              "￥" + JSON.parse(e.operatorBonusInfo).profit
          },
          {
            label: "Agent分成",
            prop: "regionalBonusInfo.profit",
            formatter: e =>
              e &&
              e.regionalBonusInfo &&
              "￥" + JSON.parse(e.regionalBonusInfo).profit
          },
          {
            label: "商家分成",
            prop: "merchantBonusInfo.profit",
            formatter: e =>
              e &&
              e.merchantBonusInfo &&
              "￥" + JSON.parse(e.merchantBonusInfo).profit
          },
          {
            label: "-",
            prop: " "
          }
        ]
      ],
      //订单售后Data
      ListDataShouhou: {},
      //订单售后信息
      ListColsShouhou: [
        [
          {
            label: "反馈内容",
            prop: "remark"
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "售后图片",
            prop: "picture",
            type: "img",
            imglook: true
          },
          {
            label: "Application Time",
            prop: "createdTime"
          },
          {
            label: "处理Status",
            prop: "state",
            formatter: e =>
              e.state == 0
                ? "未退款"
                : e.state == 1
                ? "已退款"
                : e.state == 2
                ? "退款Failure"
                : ""
          },
          {
            label: "处理结果",
            prop: "refundMoney",
            type: "button",
            // isShow:e=>e.state==0?true:false,
            formatter: e =>
              this.ListDataShouhou["state"] == 1
                ? `退款${e.refundMoney}元`
                : "-",
            showText: true,
            btnisShow: e =>
              this.ListDataShouhou["state"] == 0 &&
              this.apis.showBtn(1003, this)
                ? true
                : false,
            btnList: [
              {
                label: "处理",
                type: "primary",
                handle: e => this.showFrom()
              }
            ]
          },
          {
            label: "处理时间",
            prop: "updatedTime"
          }
        ]
      ],
      //称波动RecordData
      tableDataBodong: [
        {
          doorId: "",
          weighId: "",
          goodsName: "",
          goodsType: "",
          weighChange: "",
          cTime: ""
        }
      ],
      //称波动Record信息
      tableColsBodong: [
        {
          label: "门编号",
          prop: "door"
        },
        {
          label: "称编号",
          prop: "tray"
        },
        {
          label: "商品Name",
          prop: "goodsName"
        },
        {
          label: "重量变化",
          prop: "amount",
          formatter: e =>
            e.type == 1 ? `+${e.amount}g` : e.type == 2 ? `-${e.amount}g` : ""
        },
        {
          label: "Creation Time",
          prop: "createdName"
        }
      ],
      // 商品Data
      tableData: [],
      // 商品信息
      tableCols: [
        {
          label: "商品图片",
          prop: "goodsPic",
          type: "image"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        // {
        //     label: '商品分类',
        //     prop: 'goodsClassfy'
        // },
        {
          label: "商品Name",
          prop: "goodsName"
        },
        {
          label: "商品Type",
          prop: "goodsType",
          formatter: e => (e.goodsType == 1 ? "计件" : "称重")
        },
        {
          label: "单位",
          prop: "unit"
        },
        {
          label: "单价",
          prop: "goodsPrice"
        },
        {
          label: "成本价",
          prop: "costPrice"
        },
        // {
        //     label: '折扣价',
        //     prop: 'discount'
        // },
        {
          label: "数量",
          prop: "weight"
        },
        {
          label: "小计",
          prop: "subtotal"
        }
      ],
      //合计栏
      tableBottom: {
        title: "合计",
        content: "￥100",
        textAlign: "right",
        color: "#f00",
        titleColor: "#000"
      },
      formData: {
        orderPrice: "",
        returnPrice: ""
      },
      formCols: [
        {
          type: "readonly",
          label: "订单PaymentMoney",
          width: 350,
          prop: "orderPrice"
        },
        { type: "input", label: "退款Money", width: 350, prop: "returnPrice" }
      ],
      formRules: {
        orderPrice: [{ required: false, message: "", trigger: "blur" }],
        returnPrice: [
          { required: true, message: "Please Input退款Money", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],
      videoUrl: ""
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    refund_call(res) {
      this.refund_data.show = false;
      if (res) {
        this.init();
      }
    },
    async init() {
      let res = await this.api.aftersaleDetail({
        orderId: this.$route.query.id
      });
      if (res) {
        this.ListData = res.data.order;
        this.ListDataFeiyong = res.data.order;
        this.ListDataFencheng = res.data.bonus || {};
        this.ListDataShouhou = res.data.afterSale[0];
        this.tableDataBodong = res.data.weighLog;
        this.tableData = JSON.parse(res.data.order.productInfor);
        console.log(JSON.parse(res.data.order.productInfor));

        let sum = 0;
        this.tableData.map(item => {
          sum += item.subtotal;
        });
        this.tableBottom.content = "￥" + sum.toFixed(2);
        this.videoUrl = res.data.videoUrl;

        this.ListDataShouhou.picture = this.ListDataShouhou.picture.split(",");
        // console.log(JSON.parse(res.data.order.productInfor));
      }
    },
    showFrom() {
      this.refund_data.id = this.ListDataShouhou.id;
      this.refund_data.show = true;

      return;
      this.$prompt(
        `Please Input退款Money(PaymentMoney:${this.ListData.actuallyPaidMoney})`,
        "Hint",
        {
          confirmButtonText: "Confirm退款",
          cancelButtonText: "拒绝退款",
          distinguishCancelAndClose: true,
          cancelButtonClass: "bg_danger"
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }
      )
        .then(async ({ value }) => {
          let res = await this.api.orderRefund({
            id: this.ListData.id,
            state: 1,
            refundMoney: value,
            notes: ""
          });
          if (res) {
            this.$message({
              type: "success",
              message: "退款Success"
            });
            this.init();
          }
        })
        .catch(async action => {
          if (action == "cancel") {
            let res = await this.api.orderRefund({
              id: this.ListData.id,
              state: 2
            });
            if (res) {
              this.$message({
                type: "info",
                message: action === "cancel" ? "处理Success" : ""
              });

              this.init();
            }
          }
        });
    }
  }
};
</script>
<style scoped lang="scss">
.rad {
  width: 500px;
  height: 500px;
}
</style>
